<template>
  <header class="top-nav" :class="{ scrolled: isScrolled }">
    <el-container>
      <el-header>
        <!-- 左侧Logo区域 -->
        <div class="logo-group">
          <img src="@/assets/images/xjtu.png" class="lab-logo-img" alt="实验室logo" />
          <div class="lab-name">
            <div class="main-name">旅游服务智能辅助与质量评价文化和旅游部技术创新中心</div>
            <div class="sub-name">国家重点工程实验室</div>
          </div>
        </div>

        <!-- 移动端汉堡菜单 -->
        <div class="hamburger" @click="isMenuOpen = !isMenuOpen" v-if="isMobile">
          <el-icon><Menu /></el-icon>
        </div>

        <!-- 导航菜单 -->
        <el-menu
          :default-active="activeMenu"
          class="nav-menu"
          mode="horizontal"
          background-color="transparent"
          text-color="#fff"
          active-text-color="#ff6b6b"
          :class="{ 'mobile-menu': isMobile && isMenuOpen }"
        >
          <el-menu-item index="1" @click="handleRoute('/')">首页</el-menu-item>

          <el-sub-menu index="2">
            <template #title>关于我们</template>
            <el-menu-item index="2-1" @click="handleRoute('overview','about')">实验室概况</el-menu-item>
            <el-menu-item index="2-2" @click="handleRoute('director','about')">主任致辞</el-menu-item>
            <el-menu-item index="2-4" @click="handleRoute('structure','about')">组织架构</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="3">
            <template #title>新闻中心</template>
            <el-menu-item index="3-1" @click="handleRoute('partyBuilding','news')">党建学习</el-menu-item>
            <el-menu-item index="3-2" @click="handleRoute('newsBulletin','news')">要闻速递</el-menu-item>
            <el-menu-item index="3-3" @click="handleRoute('researchAchievements','news')">科研成果</el-menu-item>
            <el-menu-item index="3-4" @click="handleRoute('notices','news')">通知公告</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="4">
            <template #title>创新保障</template>
            <el-menu-item index="4-1" @click="handleRoute('organizationalStructure','support')">机构部门</el-menu-item>
            <el-menu-item index="4-2" @click="handleRoute('talentExpertTeam','support')">科研团队</el-menu-item>
            <el-menu-item index="4-3" @click="handleRoute('resourceSupport','support')">支撑保障</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="5">
            <template #title>研究方向</template>
            <el-menu-item index="5-1" @click="handleRoute('researchDirection','research-direction')">
              旅游服务信息汇聚
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item index="7" @click="handleProjectClick('projects')">项目介绍</el-menu-item>
          <el-sub-menu index="8">
            <template #title>联系我们</template>
            <el-menu-item index="8-1" @click="handleRoute('CenterList','contact')">联系方式</el-menu-item>
            <el-menu-item index="8-2" @click="handleRoute('GuestFeedback','contact')">反馈留言</el-menu-item>
          </el-sub-menu>
        </el-menu>

        <!-- 右上角语言选择 -->
        <div class="top-right">
          <el-dropdown trigger="click">
            <span class="language">
              EN <el-icon class="el-icon--right"><ArrowDown /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>EN</el-dropdown-item>
                <el-dropdown-item>ZH</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
    </el-container>
  </header>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ArrowDown, Menu } from '@element-plus/icons-vue'

// 这里假设你有一个 API 方法
// import { listDirection } from '@/api/researchDirection'

const router = useRouter()
const route = useRoute()

// 响应式状态
const isScrolled = ref(false)
const isMobile = ref(false)
const isMenuOpen = ref(false)
const direction = ref([])

// 计算当前激活菜单
const activeMenu = computed(() => {
  const path = route.path
  const pathMap = {
    '/': '1',
    '/about': '2',
    '/news': '3',
    '/support': '4',
    '/research': '5',
    '/cooperation': '6',
    '/project': '7',
    '/contact': '8'
  }
  for (const [key, val] of Object.entries(pathMap)) {
    if (path.startsWith(key)) return val
  }
  return '1'
})

// 路由跳转方法
const handleRoute = (path, type = '') => {
  const fullPath = type ? `/${type}/${path}` : path
  router.push(fullPath)
  isMenuOpen.value = false
}

// 监听滚动与窗口变化
const handleScroll = () => {
  isScrolled.value = window.scrollY > 50
}

const checkScreenSize = () => {
  isMobile.value = window.innerWidth < 768
  if (!isMobile.value) isMenuOpen.value = false
}

// 其他菜单跳转封装
const handleProjectClick = (path) => {
  router.push(`/project/${path}`)
  isMenuOpen.value = false
}

// 模拟异步加载研究方向
const getResearchDirection = async () => {
  // const res = await listDirection()
  // direction.value = res.rows
  direction.value = [
    { directionCode: 'AI', directionName: '研究方向' },
  ]
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
  window.addEventListener('resize', checkScreenSize)
  checkScreenSize()
  getResearchDirection()
})

onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScroll)
  window.removeEventListener('resize', checkScreenSize)
})
</script>


<style scoped>
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  background-color: transparent;
  color: #fff;
  height: 90px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.top-nav.scrolled {
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 100%;
  background-color: transparent !important;
  box-shadow: none !important;
  border-bottom: none !important;
  width: 100%;
}

/* 左侧Logo区域：强制多行展示，减少横向占用 */
.logo-group {
  display: flex;
  align-items: center; /* 垂直居中 */
  gap: 10px;
  flex-shrink: 0;
  max-width: 30%; /* 进一步缩小左侧最大宽度，强制名称换行 */
  padding-right: 10px;
}

.lab-logo-img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: 4px;
}

.lab-name {
  line-height: 1.2; /* 紧凑行高，适合多行 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 固定最多2行 */
  line-clamp: 2; /* 标准属性，增强兼容性 */
  width: auto; /* 取消宽度限制，自由换行 */
}

.main-name {
  font-size: clamp(11px, 1.8vw, 14px); /* 缩小字体，促进换行 */
  font-weight: 500;
  margin-bottom: 2px;
}

.sub-name {
  font-size: clamp(9px, 1.2vw, 11px); /* 子名称同步缩小 */
  color: rgba(255, 255, 255, 0.8);
}

/* 导航菜单：确保箭头不被遮挡 */
.nav-menu {
  flex: 1;
  margin: 0 10px;
  display: flex;
  justify-content: center;
  overflow: visible !important; /* 关键：允许箭头超出容器显示 */
}

/* 菜单项样式：给箭头预留空间 */
:deep(.nav-menu .el-menu-item),
:deep(.nav-menu .el-sub-menu__title) {
  font-size: 16px;
  position: relative;
  transition: color 0.3s, padding 0.3s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  overflow: visible !important; /* 子元素不被裁剪 */
}

/* 箭头修复：避免遮挡，调整位置 */
:deep(.el-sub-menu__icon-arrow) {
  transition: transform 0.3s ease;
  margin-left: 8px; /* 增加与文字的间距 */
  font-size: 14px;
  position: relative; /* 相对定位确保在上方 */
  z-index: 1; /* 高于菜单背景 */
  right: 0; /* 取消可能的偏移 */
}

:deep(.el-sub-menu.is-opened .el-sub-menu__icon-arrow) {
  transform: rotate(180deg);
}

/* 语言选择器箭头调整 */
:deep(.top-right .el-icon--right) {
  transition: transform 0.3s ease;
  margin-left: 5px;
  font-size: 14px;
  vertical-align: middle;
  position: relative;
  z-index: 1;
}

:deep(.top-right .el-dropdown.open .el-icon--right) {
  transform: rotate(180deg);
}

/* 菜单hover下划线动画 */
:deep(.nav-menu .el-menu-item:hover::after),
:deep(.nav-menu .el-sub-menu__title:hover::after) {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: #ff6b6b;
  transform: translateX(-50%);
  transition: width 0.3s;
}

:deep(.nav-menu .el-menu-item:hover::after),
:deep(.nav-menu .el-sub-menu__title:hover::after) {
  width: 80%;
}

/* 右上角区域 */
.top-right {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 80px;
  flex-shrink: 0;
}

.language {
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

/* 下拉框样式 */
.top-nav :global(.el-menu--popup) {
  background-color: #383838 !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  margin-top: 0 !important;
  border-radius: 4px !important;
}

.top-nav :global(.el-menu--popup .el-menu-item) {
  color: #f0f0f0 !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  background: none !important;
}

.top-nav :global(.el-menu--popup .el-menu-item:hover) {
  background-color: #505050 !important;
  color: #fff !important;
}

.top-nav.scrolled :global(.el-menu--popup) {
  background-color: #303030 !important;
}

/* 移动端适配 */
.hamburger {
  display: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  z-index: 100;
}

/* 平板/中等屏幕（1024px-1200px） */
@media (min-width: 1024px) and (max-width: 1200px) {
  .logo-group {
    max-width: 28%; /* 进一步压缩左侧宽度 */
  }
  :deep(.nav-menu .el-menu-item),
  :deep(.nav-menu .el-sub-menu__title) {
    padding: 0 10px !important;
    font-size: 15px;
  }
}

/* 小屏平板（769px-1023px） */
@media (min-width: 769px) and (max-width: 1023px) {
  .logo-group {
    max-width: 25%;
  }
  :deep(.nav-menu .el-menu-item),
  :deep(.nav-menu .el-sub-menu__title) {
    padding: 0 8px !important;
    font-size: 14px;
  }
}

/* 移动端（≤768px） */
@media (max-width: 768px) {
  .logo-group {
    max-width: 55%; /* 移动端适当放宽 */
    gap: 8px;
  }
  .main-name {
    font-size: 11px;
  }
  .sub-name {
    font-size: 9px;
  }

  .nav-menu:not(.mobile-menu) {
    display: none;
  }

  .mobile-menu {
    display: flex !important;
    position: absolute;
    top: 90px;
    left: 0;
    width: 100%;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.95);
    padding: 15px 0;
    z-index: 99;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }

  :deep(.mobile-menu .el-menu-item),
  :deep(.mobile-menu .el-sub-menu__title) {
    font-size: 15px;
    padding: 12px 30px !important;
  }

  :deep(.mobile-menu .el-sub-menu .el-menu-item) {
    padding-left: 50px !important;
  }

  .hamburger {
    display: block;
  }
}
</style>